<template>
  <div>
    <select v-model="language">
      <option value="javascript">JavaScript</option>
      <option value="python">Python</option>
      <!-- 添加更多语言选项 -->
    </select>
    <select v-model="theme">
      <option value="monokai">Monokai</option>
      <option value="github">GitHub</option>
      <!-- 添加更多主题选项 -->
    </select>
    <ace-editor
        v-model="code"
        :options="editorOptions"
        :lang="language"
        :theme="theme"
        width="100%"
        height="500px"
    ></ace-editor>
  </div>
</template>

<script>
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/mode-python'
import 'ace-builds/src-noconflict/theme-monokai'
import 'ace-builds/src-noconflict/theme-github'
import 'ace-builds/webpack-resolver'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'AceEditor3',
  components: {
    'ace-editor': () => import('vue2-ace-editor')
  },
  data() {
    return {
      code: `// Write your code here...`,
      language: 'javascript',
      theme: 'monokai',
      editorOptions: {
        useWorker: false
      }
    }
  }
})
</script>

<style scoped>
pre {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
}
</style>
